<template>
  <d2-container>
    <div class="myrecord-wrap" :style="{ backgroundImage: bgImg }">
      <div class="page-middle" v-if="!startClone">
        <div class="page-middle-content">
          <!-- <div class="right-icon" @click="dialogVisible = true">
            <span>《会员规则》</span>
            <img :src="rightIconImg" alt="" />
          </div> -->
          <div class="middle-top">
            <img v-if="info.avatar" :src="info.avatar" alt="" />
            <img v-else :src="logoutImg" alt="" />
            <div>
              <span>{{ info.name }}</span>
              <div>ID: {{ info.id }}</div>
            </div>
          </div>
          <el-tabs class="middle-tabs" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="我的音色" name="1">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column align="center" type="index" width="50" label="序号">
                  </el-table-column>
                  <el-table-column align="center" label="播放">
                    <template slot-scope="scope">
                      <audio :src="scope.row.file" class="audio" :id="`audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, 'audio')
                        "></audio>
                      <img v-if="!scope.row.play" :src="playImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, 'audio')" />
                      <img v-else :src="pauseImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, 'audio')" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="sound_name" label="音色名称">
                  </el-table-column>
                  <el-table-column prop="file" label="文件名称" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column align="center" prop="update_time" label="操作日期">
                  </el-table-column>
                  <el-table-column align="center" prop="create_time" label="操作">
                    <template slot-scope="scope">
                      <div class="handle-icons">
                        <img :src="eidtImg" alt="" class="handle-icon" @click="handleEdit(scope.row)" />
                        <img :src="removeImg" alt="" class="handle-icon" @click="handleDelete(scope.row)" />
                        <img :src="downloadImg" alt="" class="handle-icon" @click="handleDownload(scope.row)" />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="prev, pager, next" :total="total" :current-page="params.page" :page-size="params.page_size">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的克隆" name="2">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column align="center" type="index" width="50" label="序号">
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="播放">
                    <template slot-scope="scope">
                      <audio :src="scope.row.file" class="audio" :id="`2audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, '2audio')
                        "></audio>
                      <img v-if="!scope.row.play" :src="playImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, '2audio')" />
                      <img v-else :src="pauseImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, '2audio')" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="filename" label="文件名称" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column align="center" prop="language" label="语言">
                    <template slot-scope="scope">
                      <div class="country-box">
                        <img :src="countrys.find(
                          (item) => scope.row.language === item.value
                        ).img
                          " class="country-icon" alt="" />
                        <span>{{
                          countrys.find(
                            (item) => scope.row.language === item.value
                          ).name
                        }}</span>
                      </div>
                    </template>
                    <!-- countrys -->
                  </el-table-column>
                  <el-table-column align="center" prop="update_time" label="操作日期">
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <div class="handle-icons">
                        <img :src="translateImg" alt="" class="handle-icon" @click="handleTrans(scope.row)" />
                        <img :src="removeImg" alt="" class="handle-icon" @click="handleDelete(scope.row)" />
                        <img :src="downloadImg" alt="" class="handle-icon" @click="handleDownload(scope.row)" />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="prev, pager, next" :total="total" :current-page="params.page" :page-size="params.page_size">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="音频降噪" name="3" v-if="!hideDev">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column align="center" type="index" width="50" label="序号">
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="播放">
                    <template slot-scope="scope">
                      <audio :src="scope.row.file_noise" class="audio" :id="`3audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, '3audio')
                        "></audio>
                      <img v-if="!scope.row.play" :src="playImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, '3audio')" />
                      <img v-else :src="pauseImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, '3audio')" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="file_noise" label="文件名称" show-overflow-tooltip>
                  </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" prop="update_time" label="操作日期">
                  </el-table-column>
                  <el-table-column align="center" prop="create_time" label="操作">
                    <template slot-scope="scope">
                      <div class="handle-icons">
                        <img :src="removeImg" alt="" class="handle-icon" @click="handleDelete(scope.row)" />
                        <img :src="downloadImg" alt="" class="handle-icon"
                          @click="handleDownload(scope.row, 'file_noise')" />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="prev, pager, next" :total="total" :current-page="params.page" :page-size="params.page_size">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="背景音乐分离" name="4"  v-if="!hideDev">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column align="center" type="index" width="50" label="序号">
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="原音频">
                    <template slot-scope="scope">
                      <audio :src="scope.row.file" class="audio" :id="`4audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, '4audio')
                        "></audio>
                      <img v-if="!scope.row.play" :src="playImg" class="play-icon" alt="" @click="
                        playAudio(scope.row, scope.$index, '4audio', '')
                        " />
                      <img v-else :src="pauseImg" class="play-icon" alt="" @click="
                        playAudio(scope.row, scope.$index, '4audio', '')
                        " />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="分离人声">
                    <template slot-scope="scope">
                      <audio :src="scope.row.voice" class="audio" :id="`42audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, '42audio')
                        "></audio>
                      <img v-if="!scope.row.play2" :src="playImg" class="play-icon" alt="" @click="
                        playAudio(scope.row, scope.$index, '42audio', '2')
                        " />
                      <img v-else :src="pauseImg" class="play-icon" alt="" @click="
                        playAudio(scope.row, scope.$index, '42audio', '2')
                        " />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="分离音频">
                    <template slot-scope="scope">
                      <audio :src="scope.row.bgm" class="audio" :id="`43audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, '43audio')
                        "></audio>
                      <img v-if="!scope.row.play3" :src="playImg" class="play-icon" alt="" @click="
                        playAudio(scope.row, scope.$index, '43audio', '3')
                        " />
                      <img v-else :src="pauseImg" class="play-icon" alt="" @click="
                        playAudio(scope.row, scope.$index, '43audio', '3')
                        " />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="voice" label="文件名称" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column align="center" prop="update_time" label="操作日期">
                  </el-table-column>
                  <el-table-column align="center" prop="create_time" label="操作">
                    <template slot-scope="scope">
                      <div class="handle-icons">
                        <img :src="removeImg" alt="" class="handle-icon" @click="handleDelete(scope.row)" />
                        <img :src="downloadImg" alt="" class="handle-icon" @click="handleDownload(scope.row, 'voice')" />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="prev, pager, next" :total="total" :current-page="params.page" :page-size="params.page_size">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="视频提取音频" name="5"  v-if="!hideDev">
              <div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column align="center" type="index" width="50" label="序号">
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="原视频">
                    <template slot-scope="scope">
                      <img v-if="!scope.row.play" :src="playImg" class="play-icon" alt=""
                        @click="handleVideo(scope.row)" />
                      <!-- <img
                        v-else
                        :src="pauseImg"
                        class="play-icon"
                        alt=""
                        @click="playAudio(scope.row, scope.$index, '5audio')"
                      /> -->
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="coin" label="提取音频">
                    <template slot-scope="scope">
                      <audio :src="scope.row.file" class="audio" :id="`51audio${scope.$index}`" @canplaythrough="
                        audioLoad(scope.row, scope.$index, '51audio')
                        "></audio>
                      <img v-if="!scope.row.play" :src="playImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, '51audio')" />
                      <img v-else :src="pauseImg" class="play-icon" alt=""
                        @click="playAudio(scope.row, scope.$index, '51audio')" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="file" label="文件名称" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column align="center" prop="update_time" label="操作日期">
                  </el-table-column>
                  <el-table-column align="center" prop="create_time" label="操作">
                    <template slot-scope="scope">
                      <div class="handle-icons">
                        <img :src="removeImg" alt="" class="handle-icon" @click="handleDelete(scope.row)" />
                        <img :src="downloadImg" alt="" class="handle-icon"
                          @click="handleDownload(scope.row, 'audio')" />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-wrap">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="prev, pager, next" :total="total" :current-page="params.page" :page-size="params.page_size">
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog title="" custom-class="myrecord-dialog" width="500px" :model="false" :visible.sync="dialogVisible">
      <div>
        <p>会员规则</p>
        <span>{{ rule }}</span>
      </div>
    </el-dialog>

    <el-dialog title="修改音色名称" custom-class="userinfo-name-dialog" width="485px" :visible.sync="nameVisible"
      :modal-append-to-body="false">
      <div>
        <el-input v-model="soundParams.sound_name" maxlength="20" show-word-limit></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="page-item-left-btn cancel" @click="nameVisible = false">
          取消
        </div>
        <div class="page-item-left-btn determine" @click="handleSubmit">
          确定
        </div>
      </span>
    </el-dialog>

    <el-dialog title="" custom-class="userinfo-name-dialog" width="60%" :visible.sync="transVisible"
      :modal-append-to-body="false">
      <div class="translate-box" v-if="transVisible">
        <div class="translate-title">
          <img :src="itemObj.img" alt="" />
          <span>{{ itemObj.country }}</span>
        </div>
        <div>{{ itemObj.gen_text }}</div>
        <!-- <el-input
          v-model="soundParams.sound_name"
          maxlength="20"
          show-word-limit
        ></el-input> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="page-item-left-btn determine" @click="transVisible = false">
          确定
        </div>
      </span>
    </el-dialog>

    <el-dialog title="" custom-class="videoVisible-dialog" width="60%" :visible.sync="videoVisible" :before-close="handleClose"
      :modal-append-to-body="false">
      <video :src="itemObj.file" controls ref="video"></video>
    </el-dialog>
  </d2-container>
</template>

<script>
import { computed, watch } from "vue";
import { request } from "@/api/_service.js";
import util from "@/libs/util.js";
import { mapState } from "vuex";
import { hideDev } from "@/api/coinType.js";

export default {
  components: {},
  computed: {
    ...mapState("d2admin/user", ["info"]),
    logoutImg() {
      return `${process.env.VUE_APP_IMAGE}image/common/user-logout.png`;
    },
  },
  data() {
    return {
      hideDev: hideDev,
      tableData: [],
      total: 0,
      params: {
        page: 1,
        page_size: 10,
        token: util.cookies.get("token"),
      },
      itemObj: {},
      activeName: "1",
      startClone: false,
      nameVisible: false,
      transVisible: false,
      videoVisible: false,
      countrys: [
        {
          name: "中文",
          value: "zh",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/china.png`;
          }),
        },
        {
          name: "英文",
          value: "en",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/usa.png`;
          }),
        },
        {
          name: "日语",
          value: "ja",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/japan.png`;
          }),
        },
        {
          name: "韩语",
          value: "ko",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/korea.png`;
          }),
        },
        {
          name: "法语",
          value: "fr",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/france.png`;
          }),
        },
        {
          name: "西班牙语",
          value: "es",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/spain.png`;
          }),
        },
      ],
      // 背景图片
      bgImg: computed(() => {
        return `url(${process.env.VUE_APP_IMAGE}image/common/bg.jpg)`;
      }),
      rightIconImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/right-icon.png`;
      }),
      userImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/user.png`;
      }),
      charsImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/chars.png`;
      }),
      roseIconImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/rose-icon.png`;
      }),
      playImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/play-1.png`;
      }),
      pauseImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/pause-1.png`;
      }),
      downloadImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/myrecord/download.png`;
      }),
      eidtImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/myrecord/edit.png`;
      }),
      removeImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/myrecord/remove.png`;
      }),
      translateImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/myrecord/translate.png`;
      }),
      dialogVisible: false,
      chars: [],
      rule: "",
      soundParams: {
        token: util.cookies.get("token"),
        sound_name: "",
        id: "",
      },
      colInd: null,
      rowInd: null,
    };
  },
  created() {
    request({
      url: "/mapi/userChargeRule/index",
      method: "post",
      data: {
        token: util.cookies.get("token"),
      },
    }).then((ret) => {
      console.log(ret, "requestrequest");
      ret.data.map((item) => {
        this.chars.push(item);
      });
      // this.voiceList =
    });
    request({
      url: "/mapi/index/getCommonIntro",
      method: "post",
      data: {
        text: "member_rule",
      },
    }).then((ret) => {
      console.log(ret, "requestrequest");
      this.rule = ret.data.value;
    });
  },
  mounted() {
    this.handleClick();
  },
  methods: {
    handleClose(done) {
      this.$refs.video.pause();
      done();
    },
    handleEdit(row) {
      this.soundParams.sound_name = row.sound_name;
      this.soundParams.id = row.id;
      this.nameVisible = true;
    },
    handleSubmit() {
      if (!this.soundParams.sound_name)
        return this.$message.error("请输入名称！");
      if (this.nameVisible) {
        request({
          url: "/mapi/soundBanks/saveSoundBanksById",
          method: "post",
          data: this.soundParams,
        }).then((ret) => {
          this.nameVisible = false;
          this.handleClick(false);
          this.$message.success("音色名称修改成功！");
        });
      }
    },
    handleVideo(row) {
      this.itemObj = row;
      this.videoVisible = true;
    },
    handleDownload(row, type) {
      if (type) {
        location.href = row[type];
      } else {
        location.href = row.file;
      }
    },
    handleTrans(row) {
      row.img = this.countrys.find((item) => row.language === item.value).img;
      row.country = this.countrys.find(
        (item) => row.language === item.value
      ).name;
      this.itemObj = row;
      this.transVisible = true;
    },
    handleDelete(row) {
      this.$confirm("确认删除该条数数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        request({
          url: this.activeName === '1' ? "/mapi/soundBanks/deleteSoundBanksById" : "/mapi/soundBanks/saveSoundBanksById",
          method: "post",
          data: {
            token: util.cookies.get("token"),
            sound_type: this.activeName,
            id: row.id,
          },
        }).then((ret) => {
          this.handleClick(false);
          this.$message.success("删除成功");
        });
      });
    },
    formatTimeToHHMMSS(seconds) {
      var hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      var minutes = Math.floor(seconds / 60);
      var remainingSeconds = parseInt(seconds % 60);

      return (
        hours.toString().padStart(2, "0") +
        ":" +
        minutes.toString().padStart(2, "0") +
        ":" +
        remainingSeconds.toString().padStart(2, "0")
      );
    },
    audioLoad(item, index, dom) {
      // console.log(item,index,[document.getElementById(`audio${index}`)], "audioLOad");
      document.getElementById(`${dom}${index}`);
      item.time = this.formatTimeToHHMMSS(0);
      item.totalTime = this.formatTimeToHHMMSS(
        document.getElementById(`${dom}${index}`).duration
      );
    },
    playAudio(item, index, dom, inds) {
      
      let str = inds || "";
      let audio = document.getElementById(`${dom}${index}`);
      clearInterval(item[`t${str}`]);
      if (audio.paused) {
        
        this.tableData.map((i, ind) => {
          if (ind === index) {
            item[`play${str}`] = true;
            console.log(`play${str}`, item[`play${str}`]);
            audio.play();
            item[`t${str}`] = setInterval(() => {
              item[`time${str}`] = this.formatTimeToHHMMSS(audio.currentTime);
              console.log(111);
              if (parseInt(audio.currentTime) === parseInt(audio.duration)) {
                item[`play${str}`] = false;
                item[`time${str}`] = this.formatTimeToHHMMSS(0);
                audio.pause();
                clearInterval(item[`t${str}`]);
              }
            }, 1000);

            if(inds === "3") {
              clearInterval(i.t2);
              i.play2 = false;
              clearInterval(i.t);
            i.play = false;
            } else if(inds === "2") {
              clearInterval(i.t3);
              i.play3 = false;
              clearInterval(i.t);
            i.play = false;
            }else{
              clearInterval(i.t2);
              i.play2 = false;
              clearInterval(i.t3);
              i.play3 = false;
            }
          } else {
            
            clearInterval(i.t);
              i.play = false;
              clearInterval(i.t2);
              i.play2 = false;
              clearInterval(i.t3);
              i.play3 = false;
          
           
            [...document.getElementsByTagName("audio"),].map((doms) => {
              if(doms.id !== `${dom}${index}`) doms.pause();
              // console.log(doms, "doms");
            });
            // console.log()
          
          }
        });




       
      } else {
        clearInterval(item[`t${str}`]);
        item[`play${str}`] = false;
        audio.pause();
      }
      this.colInd = inds;
      this.rowInd = index;
    },
    handleSizeChange(val) {
      this.params.page_size = val;
      this.handleClick(false);
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.handleClick(false);
    },
    handleClick(val) {
      if (val) {
        this.params = {
          page: 1,
          page_size: 10,
          token: util.cookies.get("token"),
        };
      }

      if (this.activeName === "1") {
        delete this.params.sound_type;
        this.getBanksList();
      } else {
        this.params.sound_type = this.activeName;
        this.getSoundBanks();
      }
    },
    getBanksList() {
      this.tableData = [];
      // this.total = 0;
      request({
        url: "/mapi/soundBanks/getUserSoundBanksList",
        method: "post",
        data: this.params,
      }).then((ret) => {
        this.tableData = ret.data.data.map((item) => {
          return {
            totalTime: "00:00:00",
            time: "00:00:00",
            play: false,
            t: null,
            ...item,
          };
        });
        this.total = ret.data.total;
      });
    },
    getSoundBanks() {
      this.tableData = [];
      // this.total = 0;
      request({
        url: "/mapi/sound/getSoundList",
        method: "post",
        data: this.params,
      }).then((ret) => {
        this.tableData = ret.data.data.map((item) => {
          return {
            totalTime: "00:00:00",
            totalTime2: "00:00:00",
            totalTime3: "00:00:00",
            time: "00:00:00",
            time2: "00:00:00",
            time3: "00:00:00",
            play: false,
            play2: false,
            play3: false,
            t: null,
            t2: null,
            t3: null,
            ...item,
          };
        });
        this.total = ret.data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-item-left-btn {
  font-size: 14px;
  width: 100%;
  height: 40px;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 27px;
  margin-bottom: 20px;
  border: 2px solid transparent;
  background: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
    linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));

  &:hover {
    background-image: linear-gradient(131deg, #823ad7 0%, #823ad7 100%),
      linear-gradient(131deg, #823ad7 0%, #823ad7 100%);
  }

  &.cancel {
    background-image: linear-gradient(164deg,
        rgba(23, 16, 70, 1),
        rgba(23, 16, 70, 1)),
      linear-gradient(164deg, rgba(67, 39, 165, 1), rgba(25, 14, 159, 1));

    &:hover {
      background-image: linear-gradient(164deg,
          rgba(67, 39, 165, 1),
          rgba(25, 14, 159, 1));
    }
  }

  &.determine {
    background-image: linear-gradient(177deg, #2b186e 0%, #120c69 99%),
      linear-gradient(164deg, rgba(67, 39, 165, 1), rgba(25, 14, 159, 1));

    &:hover {
      background-image: linear-gradient(164deg,
          rgba(67, 39, 165, 1),
          rgba(25, 14, 159, 1));
    }
  }
}

.myrecord-wrap {
  color: #fff;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 28px;
  box-sizing: border-box;

  .play-icon {
    width: 27px;
    height: 27px;
    cursor: pointer;
  }

  .country-box {
    display: flex;
    align-items: center;
    justify-content: center;

    .country-icon {
      width: 25px;
      height: 16px;
      margin-right: 4px;
    }
  }

  .handle-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    gap: 35px;

    .handle-icon {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }

  .page-middle {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 14px 0px;
    height: calc(100% - 20px);

    .page-middle-content {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      padding: 30px 40px;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 19px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(157deg,
            rgba(9, 5, 33, 0.7) 0%,
            rgba(16, 9, 52, 0.9) 100%),
          linear-gradient(180deg, rgba(82, 41, 169, 1), rgba(30, 17, 101, 1));
        backdrop-filter: blur(10px);
        z-index: -1;
        opacity: 0.8;
      }

      .right-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 127px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        img {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
        }

        span {
          font-size: 14px;
          color: #ffffff;
          line-height: 20px;
          margin-left: 10px;
        }
      }

      .middle-top {
        display: flex;
        align-items: center;
        margin-bottom: 32px;

        img {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 18px;
        }

        &>div {
          font-size: 14px;
          line-height: 21px;

          span {
            font-size: 18px;
            color: #ffffff;
            line-height: 27px;
          }
        }
      }

      .middle-tabs {
        height: calc(100% - 104px);
        overflow: auto;

        ::v-deep(.el-tabs__header) {
          .el-tabs__item {
            font-size: 16px;
            color: #fff;
            line-height: 25px;

            &:hover,
            &.is-active {
              color: #e540e8;
            }
          }

          .el-tabs__nav-wrap::after {
            background-color: rgba(255, 255, 255, 0.6);
            height: 1px;
          }

          .el-tabs__active-bar {
            bottom: 2px;
            height: 7px;
            background: #e540e8;
            border-radius: 4px 4px 0px 0px;
          }
        }

        ::v-deep(.el-tabs__content) {
          height: calc(100% - 55px);

          .el-tab-pane {
            height: 100%;

            &>div {
              height: 100%;

              .el-table {
                height: calc(100% - 42px);
                overflow: auto;
              }

              .pagination-wrap {
                display: flex;
                padding-top: 12px;
                justify-content: flex-end;
              }
            }
          }
        }
      }

      .page-item-left-btn {
        font-size: 18px;
        min-width: 200px;
        height: 48px;
        line-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 27px;
        border: 2px solid transparent;
        background: transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
          linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));

        img {
          width: 22px;
          height: 17px;
          margin-right: 5px;
        }

        &:hover {
          background-image: linear-gradient(131deg, #823ad7 0%, #823ad7 100%),
            linear-gradient(131deg, #823ad7 0%, #823ad7 100%);
        }

        &.cancel {
          background: #541d89;

          &:hover {
            background: #6f2cad;
          }
        }
      }

      .middle-chars-list {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        padding: 40px 0 0;

        &>div {
          width: calc(100% / 3 - 16px);
          height: 248px;
          border-radius: 24px;
          padding: 51px 25px 36px;
          border: 1px solid transparent;
          background: transparent;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: linear-gradient(157deg, #0f0f35 0%, #180f48 100%),
            linear-gradient(167deg, rgba(27, 27, 99, 1), rgba(47, 32, 136, 1));
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          overflow: hidden;

          .rose-bg {
            position: absolute;
            right: 0;
            top: -50%;
            width: 61%;
            opacity: 0.4;
            z-index: 0;
          }

          .chars-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .chars-top-left {
              font-size: 38px;
              color: #e540e8;
              line-height: 52px;
              display: flex;
              align-items: center;
            }

            .chars-top-right {
              font-size: 38px;

              span {
                font-size: 25px;
              }

              // display: flex;
              // align-items: center;
            }
          }
        }
      }
    }
  }
}

::v-deep(.myrecord-dialog) {
  background: transparent;

  .el-dialog__body {
    color: #fff;
    padding: 40px 30px;
    min-height: 260px;
    border-radius: 24px;
    border: 1px solid transparent;
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(203deg,
        RGBA(24, 49, 117, 0.9) 0%,
        RGBA(16, 13, 52, 0.9) 30%,
        RGBA(16, 13, 52, 0.9) 70%,
        RGBA(65, 18, 102, 0.9) 100%),
      linear-gradient(167deg, rgba(55, 55, 255, 1), rgba(39, 176, 255, 1));
    font-size: 18px;
    line-height: 25px;

    p {
      margin: 0;
      text-align: center;
      font-size: 28px;
      line-height: 38px;
    }
  }

  .el-dialog__headerbtn {
    top: -20px;
    right: -40px;

    .el-icon-close {
      color: #fff;
      font-size: 42px;
    }
  }
}

::v-deep(.userinfo-name-dialog) {
  background: transparent;
  padding: 0;
  color: #fff;

  min-height: 228px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(203deg,
      RGBA(24, 49, 117, 0.9) 0%,
      RGBA(16, 13, 52, 0.9) 30%,
      RGBA(16, 13, 52, 0.9) 70%,
      RGBA(65, 18, 102, 0.9) 100%),
    linear-gradient(167deg, rgba(55, 55, 255, 1), rgba(39, 176, 255, 1));
  font-size: 18px;
  line-height: 25px;

  .el-dialog__body {
    padding: 20px 26px;

    .translate-box {
      color: #fff;
      min-height: 126px;

      .translate-title {
        display: flex;
        align-items: center;
        position: relative;
        top: -30px;

        img {
          width: 40px;
          height: 22px;
          margin-right: 4px;
        }
      }
    }

    &>div {
      &>div {
        max-height: 300px;
        overflow: auto;
      }

      &>p {
        margin: 0;
        text-align: center;
        font-size: 28px;
        line-height: 38px;
      }
    }

    .el-input__inner {
      color: #fff;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(203deg,
          rgba(30, 19, 93, 1),
          rgba(23, 13, 86, 1)),
        linear-gradient(167deg, rgba(27, 27, 99, 0.77), rgba(47, 32, 136, 1));
    }

    .el-input__count-inner {
      background: transparent;
      color: #fff;
    }

    .upload-demo {
      height: 360px;
      max-height: 360px;
      display: flex;
      justify-content: center;

      .upload-demo-content {
        text-align: center;

        img {
          width: 350px;
          height: 350px;
          border-radius: 50%;
        }
      }

      .el-upload-list {
        display: none;
      }
    }
  }

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
      font-size: 20px;
    }
  }

  .el-dialog__footer {
    padding: 20px 20px 0px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;

    .page-item-left-btn {
      width: 118px;
      height: 40px;
      margin-left: 20px;
      font-size: 17px;
      line-height: 20px;
    }
  }

  .el-dialog__headerbtn {
    z-index: 50;

    // top: -20px;
    // right: -40px;
    .el-icon-close {
      color: #fff;
      font-size: 22px;
    }
  }
}

::v-deep(.videoVisible-dialog) {
  background: transparent;

  .el-dialog__body {
    padding: 0;
    display: flex;
  }

  video {
    width: 70%;
    background-color: #000;
    border-radius: 20px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
  }

  .el-dialog__headerbtn {
    top: -20px;
    right: -40px;

    .el-icon-close {
      color: #fff;
      font-size: 42px;
    }
  }
}
</style>
